<template>
	<view>
		<!-- <view class="dingguding">
			<view class="dianpuxx">
				<image class="mendtup" src="../../static/dengl.jpg" mode="aspectFill"></image>
				<view class="mendxx">
					<view class="dianpum">江南万达店</view>
					<view class="dizhi">
						<image class="dwtup" src="../../static/weiz.png"></image>
						<view>南宁市江南区亭洪路1231号</view>
					</view>
				</view>
			</view>
			<view class="jindulan">
				<view class="liangb">
					<view>员工</view>
					<view class="xinxi">10</view>
				</view>
				<view class="liangb">
					<view>出勤</view>
					<view class="xinxi">8</view>
				</view>
				<view class="liangb">
					<view>迟到</view>
					<view class="xinxi">2</view>
				</view>
				<view class="liangb">
					<view>出勤率</view>
					<view class="xinxi">80%</view>
				</view>
			</view>
		</view> -->
		<view class="xiabygl">
			<view class="yglieb" v-for="item in yglist">
				<view class="ygxinx">
					<view :class="item.sex==0?'nan':'nv'"></view>
					<view class="ygzhil">
						<view class="sahngbu" @click="goyuangxinx">
							<image class="ygtoux" src="../../static/avatar.jpg" mode="aspectFill"></image>
							<view class="yuangxinx">
								<view>{{item.name}}</view>
								<view class="yuangzw">
									<view>{{item.role}}</view>
									<view :class="item.zt==0?'zhib':'xiuxi'">{{item.zt==0?'值班':'休息'}}</view>
								</view>
							</view>
						</view>
						<view class="laoqin">
							<view class="youjg">迟到:1</view>
							<view class="youjg">早退:3</view>
							<view class="youjg">请假:0</view>
						</view>
					</view>
				</view>
				<view class="caozuo">
					<image class="cctybia" src="../../static/dianh.png"></image>
					<image class="cctybia" src="../../static/yhbianj.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yglist:[{
					sex:0,
					jindu:'90%',
					name:'李小明',
					role:'理发师',
					zt:0
				},{
					sex:1,
					jindu:'70%',
					name:'张生',
					role:'店长',
					zt:0
				},{
					sex:1,
					jindu:'60%',
					name:'黄国成',
					role:'理发师',
					zt:0
				},{
					sex:1,
					jindu:'55%',
					name:'陆正明',
					role:'理发师',
					zt:0
				},{
					sex:0,
					jindu:'35%',
					name:'吴丽丽',
					role:'理发师',
					zt:0
				},{
					sex:0,
					jindu:'20%',
					name:'梁小玲',
					role:'理发师',
					zt:1
				},{
					sex:1,
					jindu:'10%',
					name:'何梅青',
					role:'理发师',
					zt:1
				}]
			}
		},
		methods: {
			goyuangxinx(){
				uni.navigateTo({
					url:'../gerenguiji/gerenguiji'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dingguding{
		width: 650rpx;
		padding:30rpx 50rpx;
		background: #f8f8f8;
		position: fixed;
		top: 44px;
		z-index: 99;
		.dianpuxx{
			display: flex;
			align-items: center;
			.mendtup{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
			.mendxx{
				margin-left: 10rpx;
				.dianpum{
					font-size: 30rpx;
					font-weight: bold;
				}
				.dizhi{
					margin-top: 10rpx;
					font-size: 25rpx;
					display: flex;
					align-items: center;
					color: #999999;
					.dwtup{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.jindulan{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 25rpx;
			color: #111111;
			margin-top: 30rpx;
			.liangb{
				width: 100rpx;
				height: 70rpx;
				background: #bfbfbf;
				padding: 20rpx;
				.xinxi{
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			.waiku{
				margin-top: 15rpx;
				width: 650rpx;
				height: 25rpx;
				background: #d8d8d8;
				border-radius: 13rpx;
				.jindu{
					width: 70%;
					height: 25rpx;
					background: #ff007f;
					border-radius: 13rpx;
				}
			}
		}
	}
	.xiabygl{
		width: 690rpx;
		padding: 30rpx;
		// margin-top: 280rpx;
		.yglieb{
			background: #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.caozuo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 150rpx;
				margin-right: 20rpx;
				.cctybia{
					width: 60rpx;
					height: 60rpx;
				}
			}
			.ygxinx{
				display: flex;
				align-items: center;
				width: 500rpx;
				.nan{
					width: 20rpx;
					height: 140rpx;
					background: #007AFF;
					margin-right: 20rpx;
					border-radius: 20rpx 0 0 20rpx;
				}
				.nv{
					width: 20rpx;
					height: 140rpx;
					background: #ff007f;
					margin-right: 20rpx;
					border-radius: 20rpx 0 0 20rpx;
				}
				.ygzhil{
					font-size: 28rpx;
					.yuangjind{
						height: 15rpx;
						background: #c8ccd4;
						border-radius: 8rpx;
						.jindut{
							height: 15rpx;
							border-radius: 8rpx;
							background: #2B85E4;
						}
					}
					.laoqin{
						display: flex;
						align-items: center;
						padding: 0 0 10rpx 0;
						font-size: 25rpx;
						color: #2C405A;
						.youjg{
							margin-right: 20rpx;
						}
					}
					.sahngbu{
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;
						.ygtoux{
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
						}
						.yuangxinx{
							margin-left: 10rpx;
							.yuangzw{
								display: flex;
								align-items: center;
								font-size: 25rpx;
								color: #2979FF;
								.zhib{
									padding: 5rpx 20rpx;
									font-size: 25rpx;
									background: #ff007f;
									border-radius: 20rpx;
									color: #ffffff;
									margin-left: 10rpx;
									
								}
								.xiuxi{
									padding: 5rpx 20rpx;
									font-size: 25rpx;
									background: #d0d0d0;
									border-radius: 20rpx;
									color: #838383;
									margin-left: 10rpx;
									
								}
							}
						}
					}
				}
			}
		}
	}
</style>
